// .audit-page {
//   position: relative;
//   height: 100%;

//   .top-nav {
//     position: fixed;
//     top: 0;
//     left: 0;
//     width: 100%;
//     // background-image: linear-gradient(190deg, #d9e7fb 20%, #f0f3f8 40%);
//     // background-color: var(--color-priamry);
//     box-sizing: border-box;
//     // padding-bottom: 150px;

//     z-index: 10001;

//     .nav-title {
//       display: flex;
//       align-items: center;
//       padding-left: 30rpx;
//       background-color: var(--color-priamry);

//       .left-back text {
//         font-size: 42rpx;
//         font-weight: bold;
//         color: #fff;
//       }

//       .cus-title {
//         flex: 1;
//         color: #fff;
//         font-size: 32rpx;
//         font-weight: bold;
//         text-align: center;
//       }
//     }

//     .nav-empty {
//       height: 100px;
//       border-radius: 0 0 40% 40%;
//       background-color: var(--color-priamry);
//     }
//   }

//   .plan-wrap {
//     position: relative;
//     width: 100%;
//     height: 100%;
//     // padding: 0 30rpx;
//     box-sizing: border-box;
//     z-index: 1;

//     &::before {
//       position: absolute;
//       top: 0;
//       left: -20%;
//       content: "";
//       width: 140%;
//       height: 150px;
//       border-radius: 0 0 50% 50%;
//       // background: linear-gradient(to right, #3498db, #2ecc71);
//       background-color: var(--color-priamry);
//       backface-visibility: hidden;
//       transform: translateZ(0);

//       // position: absolute;
//       // left: 0;
//       // top: 0;
//       // height: 100px;
//       // border-radius: 0 0 40% 40%;
//       // background-color: var(--color-priamry);
//     }

//     .plan-list {
//       position: relative;
//       z-index: 2;
//       color: #fff;
//       padding: 30rpx;
//     }

//     .plan-item {
//       width: 100%;
//       height: 1000px;
//     }
//   }
// }

.audit-page {
  position: relative;
  min-height: 100%;

  .top-nav {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    width: 100%;
    height: 100px;
    background-color: var(--color-priamry);
    box-sizing: border-box;
    z-index: 10001;

    .left-back text {
      font-size: 42rpx;
      font-weight: bold;
      color: #fff;
    }

    .cus-title {
      flex: 1;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
      text-align: center;
    }

    .nav-title {
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      background-color: var(--color-priamry);


    }
  }

  .nav-empty {
    position: fixed;
    top: 80px;
    left: -10%;
    width: 120%;
    height: 150px;
    border-radius: 0 0 50% 50%;
    background-color: var(--color-priamry);
    backface-visibility: hidden;
    transform: translateZ(0);
    z-index: 3;
  }

  .plan-list {
    position: relative;
    padding: 100px 30rpx 30rpx;
    z-index: 5;

    .plan-item {
      color: #fff;
      margin-bottom: 20rpx;
      background-color: #fff;
      padding-bottom: 40rpx;

      .plan-title {
        display: flex;
        align-items: center;
        height: 100rpx;
        font-size: 28rpx;
        color: var(--main-text);
        border-bottom: 2rpx solid #f2f2f2;
        padding: 0 20rpx;

        .iconfont {
          font-size: 36rpx;
          color: var(--color-priamry);
          margin-right: 10rpx;
        }
      }

      .plan-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60rpx;
        font-size: 28rpx;
        color: var(--main-text);
        padding: 0 40rpx;
      }

      .plan-statisc {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        .plan-statisc-item {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 160rpx;
          font-size: 28rpx;
          color: var(--main-text);

          &::before {
            position: absolute;
            right: 0;
            top: 50%;
            content: '';
            margin-top: -26rpx;
            width: 2rpx;
            height: 52rpx;
            background-color: #f2f2f2;
          }

          &:last-child::after {
            background-color: transparent;
          }

          .statisc-item-value {
            color: var(--color-priamry);
            margin-bottom: 12rpx;
          }
        }
      }

      .plan-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90%;
        height: 80rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #fff;
        background-color: var(--color-priamry);
        border-radius: 40rpx;
        margin: 0 auto;
      }
    }
  }
}